<template>
  <div>
    <!--显示红色-->
    <h2 v-color="color1">指令的值1测试</h2>
    <!--显示蓝色-->
    <h2 v-color="color2">指令的值2测试</h2>
    <button @click="changeColor">改变第一个h2的颜色</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color1: 'red',
      color2: 'blue',
    }
  },
  directives: {
    color: {
      // el:是使用 指令的标签元素
      // binding：中有个value属性，在value属性中可以拿到 使用指令时传过去的值
      inserted(el, binding) {
        // console.log(el)
        // console.log(binding)
        el.style.color = binding.value
      },
      // update是当  指令的值改变时会自动执行update函数
      // el:是使用 指令的标签元素
      // binding：中有个value属性，在value属性中可以拿到 改变之后的值
      update(el, binding) {
        // console.log('指令的值变化了')
        // console.log(el)
        // console.log(binding)
        el.style.color = binding.value
      },
    },
  },
  methods: {
    changeColor() {
      this.color1 = 'orange'
    },
  },
}
</script>

<style>
</style>